<template>
  <div class="case-right width-col-18">
    <!--工具条-->
    <div class="search-wrap">
      <div class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters" size="small">
          <el-form-item>
            <el-input v-model="filters.case_name" clearable placeholder="请输入案例名称">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.id" clearable placeholder="请输入案例ID">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="filters.map_id" placeholder="请选择地图ID">
              <el-option v-for="item in mapOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="operaution-btn-group">
        <!-- 从创建作业过来的， 不显示 添加到组 和 删除的按钮 -->
        <div v-show="!fromCreateTaskPage">
          <el-button size="small" type="primary" @click="_handleAddToGroup" :disabled="!selectedCount">添加到组
          </el-button>
        </div>
      </div>
    </div>
    <MyTable ref="worldsimTable" currentTable="worldsimTable" :hasSelection="true" :idEnableSelection="idEnableSelection"
      :tableData="caseData" :tableItem="columns" :total="total" @handlePageChange="handlePageChange"
      @selectionChange="handleSelectionChange" />
    <!--弹窗-->
    <AppendGroupDialog :showModal="isVisibleAppendGroupModal" :customGroups="customGroups" :selectNum="selectedCount"
      @closeDialog="_closeAppendDialog" @handleDialogSubmit="_submitAppend" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import MyTable from '@/components/MyTable'
import DeleteDialog from '@/components/DeleteDialog'
import AppendGroupDialog from '@/components/AppendGroup'
import { fetchCaseList, fetchCustomGroup, fetchGroupCase } from '@/api/case'
import { mapOptions } from '@/business/const'
import addToGroupMixin from '@/mixins/group/add_to_group'
const worldsimMixin = new addToGroupMixin('worldsim')
export default {
  mixins: [worldsimMixin],
  components: { MyTable, AppendGroupDialog, DeleteDialog },
  data() {
    return {
      isVisibleAppendGroupModal: false,
      caseData: [],
      customGroups: [], // 自定义组的列表
      columns: [
        {
          name: '案例名称',
          prop: 'case_name',
          width: '400px'
        },
        {
          name: '案例ID',
          prop: 'id',
          width: '300px'
        },
        {
          name: '地图',
          prop: 'map_id',
          width: ''
        },
      ],
      total: 0,
      pageIndex: 1,
      pageSize: 20,
      selectIds: [],
      selectedCount: 0,
      filters: {
        case_name: '',
        id: '',
        map_id: ''
      },
      mapOptions,
      idEnableSelection: true
    }
  },
  props: {
    fromCreateTaskPage: Boolean
  },
  computed: {
    ...mapState({
      caseIds: state => state.case.caseIds,
      treeIdForWorldsim: state => state.scene.treeIdForWorldsim,
      checkedCustomGroup: state => state.scene.checkedCustomGroup,
      isCommonCategory: state => state.scene.isCommonCategory,
      caseGroupIds: state => state.case.caseGroupIds,
      caseCategoryIds: state => state.case.caseCategoryIds,
    })
  },
  watch: {
    filters: {
      deep: true,
      handler: function () {
        this.pageIndex = 1
        this.pageSize = 20
        this.getCaseList()
      }
    },
    // 当前点击的tree id，匹配选中的 category组 做判断，
    treeIdForWorldsim: {
      handler(newVal) {
        if (newVal) {
          this.pageIndex = 1
          this.pageSize = 20
          this.handleReset()
          setTimeout(() => {
            this.handleTreeAndTableSelection(this.caseCategoryIds, this.treeIdForWorldsim)
            this.getCaseList()
          }, 1000)
        }
      }
    },
    // 当前选中的category 组，右侧列表重新获取， 匹配点击的tree id 做判断
    caseCategoryIds: {
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.pageIndex = 1
          this.pageSize = 20
          setTimeout(() => {
            this.handleTreeAndTableSelection(this.caseCategoryIds, this.treeIdForWorldsim)
            this.getCaseList()
          }, 1000)
        }
      }
    },
    // 当前点中的自定义组，右侧列表重新获取， 匹配选中的自定义组的id 做判断
    checkedCustomGroup: {
      deep: true,
      handler(newVal) {
        if (!!newVal.id) {
          this.pageIndex = 1
          this.pageSize = 20
          setTimeout(() => {
            this.handleTreeAndTableSelection(this.caseGroupIds, this.checkedCustomGroup.id)
            this.getCaseList()
          }, 1000)
        }
      }
    },
    // 选中的自定义组，右侧列表重新获取， 匹配选中文字的自定义组的id 做判断
    caseGroupIds: {
      deep: true,
      handler(newVal) {
        setTimeout(() => {
          this.handleTreeAndTableSelection(this.caseGroupIds, this.checkedCustomGroup.id)
          this.getCaseList()
        }, 1000)
      }
    }
  },
  mounted() {
    this.getCustomGroup()
    this.getCaseList()
  },
  methods: {
    // 勾选数据回显到页面
    showbackSelection() {
      this.$nextTick(() => {
        this.caseIds.forEach(item => {
          this.caseData.forEach(row => {
            if (item === row.id) {
              this.$refs.worldsimTable.$refs.myTable.toggleRowSelection(row, true)
            }
          })

        })
      })
    },
    // 获取自定义组列表
    getCustomGroup() {
      fetchCustomGroup({ run_mode: "worldsim" }).then(res => {
        if (res && res.data) {
          this.customGroups = res.data
        }

      })
    },
    // 获取案例列表
    getCaseList() {
      // 点击默认标签组 的获case
      if (this.isCommonCategory) {
        const params = {
          page_num: this.pageIndex,
          page_size: this.pageSize,
          run_mode: 'worldsim',
          category_id: this.treeIdForWorldsim || 0,  // 0612 修改接口参数 
        }
        let reqParams = Object.assign(params, this.filters)
        fetchCaseList(reqParams).then((res) => {
          if (res && res.data) {
            this.total = res.total
            this.caseData = res.data
          }
          // 如果该页面是从创建作业调用过来的，则执行下面这行， 实现【上一步】时回显已勾选数据的功能
          if (this.fromCreateTaskPage) {
            this.showbackSelection()
          }
        }).catch(err => {
          this.$message.error(err)
        })
      } else {
        // 点击自定义组 的获case
        const groupParams = {
          page_num: this.pageIndex,
          page_size: this.pageSize,
          group_id: this.checkedCustomGroup.id
        }
        fetchGroupCase(groupParams).then(res => {
          if (res && res.data) {
            this.total = res.total
            this.caseData = res.data
          }
          // 如果该页面是从创建作业调用过来的，则执行下面这行， 实现【上一步】时回显已勾选数据的功能
          if (this.fromCreateTaskPage) {
            this.showbackSelection()
          }
        }).catch(err => {
          this.$message.error(err)
        })
      }
    },
    // 切换pagesize 、切换页码
    handlePageChange(pageData) {
      this.pageIndex = pageData.page_num
      this.pageSize = pageData.page_size
      this.getCaseList()
    },
    // 选择
    handleSelectionChange(val) {
      this.selectIds = val.map(item => {
        return item.id
      })
      this.selectedCount = this.selectIds.length
      // 如果该页面是从创建作业调用过来的，则执行下面这行，将选中的case_id 存入store
      if (this.fromCreateTaskPage) {
        this.$store.dispatch('case/setSelectedCaseIds', this.selectIds)
      }
    },
    // 重置
    handleReset() {
      this.filters.case_name = ''
      this.filters.id = ''
      this.filters.map_id = ''
    },
    // 左侧tree 和右侧列表的 对应关系判断，从而 判断右侧列表的选择框 可勾选/disabeld
    handleTreeAndTableSelection(selectArr, currentId) {
      if (selectArr.indexOf(currentId) > -1) {
        this.$nextTick(() => {
          this.idEnableSelection = false
        })
      } else {
        this.$nextTick(() => {
          this.idEnableSelection = true
        })
      }
    }
  },
}
</script>
<style lang="scss">
.case-right .el-table {
  overflow: auto;
}
</style>